<template>
	<view class="grey text" :style="{height:heightbody+'px'}" :class="$tm.vx.state().tmVuetify.black ? 'black bk' : ''">
		<tm-echarts ref="teCart" @init="gc"></tm-echarts>
		<view class="pa-32">
			<tm-sheet :margin="[0, 0]" :shadow="24">
				<text class="text-size-s">Ecahrt图表是最新的5.2.1版本，包含四个模块:柱图，线，饼，仪表盘。 我把它封装成最简单的操作。非常方便图表的操作和运用。</text>

				<view class="py-24 text-size-s text-blue" style="white-space: pre-wrap;">更详细更丰富的示例见官方文档:https://echarts.apache.org/examples/zh/</view>
				
			</tm-sheet>
		</view>
	</view>
</template>
<script>
import tmEcharts from '@/tm-vuetify/components/tm-echarts/tm-echarts.vue';
import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
import tmSheet from '@/tm-vuetify/components/tm-sheet/tm-sheet.vue';
import jsonData from  'subpages/echarts/datajson';
export default {
	components: {
		tmEcharts,
		tmButton,
		tmSheet
	},
	data() {
		return {
			id:'1_1',
			heightbody:0,
		};
	},
	created() {
		let p = uni.getSystemInfoSync();
		this.heightbody = p.windowHeight
	},
	onLoad(obj) {
		this.id = obj?.id||'1_1';
	},
	methods: {
		gc(res) {
			// 初始化成功后返回的数据如下：
			const { width, height, chart } = res;
			this.$nextTick(function(){
				chart.setOption(jsonData[this.id]);
			})
		},
	}
};
</script>

<style lang="scss"></style>
